import ReactEcharts from 'echarts-for-react';

const Proportion = () => {
    const option = {
        // backgroundColor: '#001529', // 图表背景色
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: ['整形科', '皮肤科', '神经科', '骨科', '内分泌科', '消化科', '放射科', '放射科'],
            axisLabel: {
                color: '#ffffff' // X轴文字颜色
            },
            axisLine: {
                show: false // 隐藏 X 轴线
            }
        },
        yAxis: {
            type: 'value',
            name: '单位：万元',
            nameTextStyle: {
                color: '#ffffff' // Y轴单位文字颜色
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.2)' // Y轴分割线颜色（淡色）
                }
            },
            axisLabel: {
                color: '#ffffff' // Y轴文字颜色
            }
        },
        series: [{
            data: [90, 90, 90, 90, 90, 90, 90, 90],
            type: 'bar',
            itemStyle: {
                // 空心柱子样式
                color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                        {offset: 1, color: '#024746'}, // 0% 处的颜色
                        {offset: 0, color: '#022D4F'} // 100% 处的颜色
                    ],
                    global: false
                },
                borderColor: '#018F74', // 边框颜色（顶部颜色）
                borderWidth: 1, // 边框宽度
                borderType: 'solid', // 边框类型
                barBorderRadius: [0, 0, 0, 0], // 圆角
                shadowColor: 'rgba(2, 43, 76, 0.5)', // 阴影色
                shadowBlur: 10, // 阴影模糊
                shadowOffsetY: 5 // 阴影偏移
            },
            barWidth: '15%', // 柱宽
            label: {
                show: true, // 显示标签
                position: 'top', // 标签位置
                color: '#ffffff' // 标签文字颜色
            }
        }]
    };

    return (
        <div style={{width: '100%', height: '100%'}}>
            <ReactEcharts style={{width: '100%', height: '100%'}} option={option}/>
        </div>
    );
};

export default Proportion;